<template>
  <div>
    <div class="row">
      <leftTypeList
        :navList="navList"
        label="typeName"
        filter="true"
        @cahngeTypeId="cahngeType"
      ></leftTypeList>
      <div class="main">
        <conSelect
          :typeId="this.HSearchInfo.typeId"
          @setDataList="setDataLists"
          ref="conSelect"
          :counts="count"
        ></conSelect>
        <div class="bookList1">
          <bookList1
            lwidth="800"
            colNum="5"
            :bookList="bookList"
            v-if="bookList"
            :lable="label"
          ></bookList1>
        </div>
      </div>
    </div>
    <bookList1
      id="moreBookList"
      tabindex="0"
      v-if="moreBookList"
      lwidth="1000"
      colNum="6"
      :bookList="moreBookList"
      :lable="label"
    ></bookList1>
    <loading ref="waterfall" @view="view"></loading>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      HSearchInfo: { typeId: 1, pageNum: 1, pageSize: 10 },
      // HSearchInfo: this.$route.params.HSearchInfo,
      bookList: [],
      moreBookList: [],
      label: "图书",
      type: [],
      over: false,
      total: 0,
      count: 10,
    };
  },
  computed: {
    navList: function () {
      return this.$store.state.bookType.bookTypeList.allBookTypeList;
    },
  },
  components: {
    leftTypeList: () => import("@/components/base/leftTypeList.vue"),
    bookList1: () => import("@/components/book/bookList1.vue"),
    conSelect: () => import("@/components/util/conSelect.vue"),
    loading: () => import("@/components/util/loading.vue"),
  },
  created() {
    this.type = this.$store.state.bookType.bookTypeList.allBookTypeList.map(
      ({ typeId, typeName, children }) => {
        return { typeId, typeName, children };
      }
    );
    // console.log("type", this.type);
  },
  mounted() {
    // this.HSearchInfo.typeId == this.$route.query.typeId
    //   ? this.$route.query.typeId
    //   : 1;
    // if (this.$route.query.HSearchInfo) {
    //   this.$set(
    //     this.HSearchInfo,
    //     "bookName",
    //     this.$route.query.HSearchInfo.bookName
    //   );
    // }

    // 获取搜索框的搜索内容
    // if (this.$route.params.HSearchInfo) {
    //   this.HSearchInfo = this.$route.params.HSearchInfo;
    // }
    // this.$store.commit("HSearchInfo/setHSearchInfo", this.HSearchInfo);
    this.HSearchInfo = this.$store.state.HSearchInfo;

    this.reSetBookType();
    this.findAll();
  },
  methods: {
    reSetBookType() {
      this.$axios
        .post(
          "/index/sys/bookTypeInfo/getById?id=" +
            this.$store.state.HSearchInfo.HSearchInfo.typeId
        )
        .then(({ data }) => {
          this.label = data.data.typeName;
          // console.log("获取类型名称", data.data.typeName);
        });
    },
    flushs() {
      this.moreBookList = [];
      this.over = false;
      const _this = this;
      this.HSearchInfo.pageNum = 1;
      this.$nextTick(() => {
        _this.$refs.waterfall.over = false;
        // this.$refs.waterfall.setOver(false);
      });
    },
    findAll() {
      this.flushs();
      // console.log("filter: findAll : this.findByPage = ", this.HSearchInfo);
      this.$axios
        .post("index/sys/book/filterBooksByES", this.HSearchInfo)
        .then(({ data }) => {
          console.log("dataList:", data.data);
          if (data.data) {
            this.count = data.data.total;
            this.bookList = data.data.dataList;
          } else {
            this.count = 0;
            this.bookList = [];
            // this.
          }
        });
      this.reSetBookType();
    },
    cahngeType(typeId) {
      //父或子
      // console.log("cahngeType:", typeId);
      this.HSearchInfo.typeId = typeId;
      this.$store.commit("HSearchInfo/setHSearchInfo", this.HSearchInfo);
      //变换type名称
      this.$axios
        .post("index/sys/bookTypeInfo/getById?id=" + typeId)
        .then(({ data }) => {
          this.label = data.data.typeName;
          // console.log("变换type名称=", this.label);
        });
      this.reSetBookType();
      this.findAll();
    },
    setDataLists({ total, pages, currPage, dataList }, push = false) {
      // console.log("P-> setDataLists dataList=", dataList);
      // console.log("push=", push);

      if (push) {
        this.moreBookList.push.apply(this.moreBookList, dataList);
        this.total = total;
        if (currPage > pages) {
          this.over = true;
        }
      } else {
        this.moreBookList = dataList;
        this.over = false;
        this.$refs.waterfall.over = false;
        // 滚动到
        this.$nextTick(() => {
          document.getElementById("moreBookList").scrollIntoView();
        });
      }
    },
    view() {
      console.log("在外部监听到的滚动");
      console.log("findByPage.pageNum:", this.HSearchInfo.pageNum);
      console.log("this.over", this.over);
      // 当数据全部加载完成后
      if (this.over) {
        this.$refs.waterfall.isLoading = false;
        this.$refs.waterfall.over = true;
        // 不在继续请求新的数据
        return;
      }
      // 显示加载的图标
      this.$refs.waterfall.isLoading = true;
      // 页数加一
      ++this.HSearchInfo.pageNum;
      // 下拉至图标处请求 内容精选
      this.$refs.conSelect.filter(true);

      this.$refs.waterfall.isLoading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: calc(100% - 180px);
}
</style>